<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <lk-box :box-total="total"></lk-box>
    </div>

    <template id="lkBox">
        <div style="background-color: antiquewhite; width: 200px; height: 200px;">
             <p>父组件传值：{{boxTotal}}</p>

            <div>
                <!-- 这里点击修改父组件传入的值时，是不能修改的，控制台会提示 
                    [Vue warn]: Attempting to mutate prop "boxTotal". Props are readonly.
                -->
                <button @click="change">点击修改</button>
            </div>


            <p>------------------------</p>

            <div>
                <p>修改自己组件内部的数据：{{myTotal}}</p>
                <button @click="myTotal++">点击修改</button>
            </div>
        </div>
        
    </template>

</body>
<script src="js/vue.js"></script>
<script>
    const lkBox = {
        data() {
            return {
                myTotal: this.boxTotal,     // 将传入的参数作为初始值
            }
        },
        props: ['boxTotal'],  // 这里如果是驼峰式命名，在属性绑定的位置就需要使用 “-” 来说明 
        template: `#lkBox`,
        methods: {
            change(event) {
                this.boxTotal++;
            }
        }

    };


    const app = Vue.createApp({
        data() {
            return {
                total: 20
            }
        },
        components: {
            "lk-box": lkBox,
        }
    }).mount("#app");
</script>

</html>